<template>
  <!-- , width: fixedHeader ? `calc(100% - ${sidebarOpened ? 256 : 80}px)` : '100%'  -->
  <a-layout-header
    v-if="!headerBarFixed"
    :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed', ]"
    :style="{ padding: '0' }">

    <div v-if="mode === 'sidemenu'" class="header" :class="theme">
      <div class="header-index-wide">
        <div class="header-index-left" :style="newTopMenuStyle.headerLeftWidth">
          <a-icon
            v-if="device==='mobile'"
            class="trigger" style="line-height: 64px;"
            :type="collapsed ? 'menu-fold' : 'menu-unfold'"
            @click.native="toggle"></a-icon>
          <a-icon
            v-else
            class="trigger" style="line-height: 64px;"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click.native="toggle"/>
          <span style="font-family: 微软雅黑;font-size: 22px;min-width: 230px">平高集团</span>
          <!--<span v-else>Jeecg-Boot</span>-->
          <!--追加 by li 添加一级菜单布局 START-->
          <div class="top-menu" :style="newTopMenuStyle.topMenuWidth">
            <m-menu
              mode="horizontal"
              :menu="permissionMenuList"
              @select="level1_select"
              :theme="theme"></m-menu>
          </div>
        </div>
        <user-menu :theme="theme"/>
      </div>

    </div>
    <!-- 顶部导航栏模式 -->
    <div v-else :class="['top-nav-header-index', theme]">
      <div class="header-index-wide">
        <div class="header-index-left" :style="newTopMenuStyle.headerLeftWidth">
          <!--追加 by li 显示logo-->
          <!-- <logo class="top-nav-header" :show-title="device !== 'mobile'" :style="topMenuStyle.topNavHeader"/> -->
          <a-icon
            v-if="device === 'mobile'"
            class="trigger" style="color: white;"
            :type="collapsed ? 'menu-fold' : 'menu-unfold'"
            @click.native="toggle"></a-icon>
          <div class="logo" v-if="device !== 'mobile'" style="min-width: 200px">
            <img src="../../../public/logo.png" alt="logo">
          </div>
          <span style="padding-left: 18px;font-family: 微软雅黑;font-size: 22px;min-width: 230px">平高集团</span>
          <!--追加 by li 添加一级菜单布局 START-->
          <div class="top-menu" :style="newTopMenuStyle.topMenuWidth">
            <m-menu
              mode="horizontal"
              :menu="permissionMenuList"
              @select="level1_select"
              :theme="theme"></m-menu>
          </div>
          <!-- <div v-if="device !== 'mobile'" :style="newTopMenuStyle.topSmenuStyle">
                 <s-menu
                   mode="horizontal"
                   :menu="menus"
                   :theme="theme"></s-menu>
               </div> -->
          <!-- <a-icon
             v-else
             class="trigger"
             :type="collapsed ? 'menu-fold' : 'menu-unfold'"
             @click.native="toggle"></a-icon> -->
        </div>
        <user-menu class="header-index-right" :theme="theme" :style="newTopMenuStyle.headerIndexRight"/>
      </div>
      <!--追加 by li 二级菜单-->
      <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
        <div v-if="device !== 'mobile'" :style="topMenuStyle.topSmenuStyle">
          <s-menu
            mode="horizontal"
            :menu="level2menus"
            :theme="theme"></s-menu>
        </div>

      </div>
    </div>

  </a-layout-header>
</template>

<script>
  import UserMenu from '../tools/UserMenu'
  import SMenu from '../menu/'
  import Logo from '../tools/Logo'

  import { mixin } from '@/utils/mixin.js'
  // 追加 by li 使用vuex
  import { mapState, mapActions } from 'vuex'
  // 追加 by li 使用util
  import { getchild } from "@/utils/util"
  // 追加 by li 追加顶部菜单
  import MMenu from '../menu/mymenu'
  export default {
    name: 'GlobalHeader',
    components: {
      UserMenu,
      SMenu,
      Logo,
      // 追加 by li 追加顶部菜单
      MMenu
    },
    mixins: [mixin],
    props: {
      mode: {
        type: String,
        // sidemenu, topmenu
        default: 'sidemenu'
      },
      // menus: {
      //   type: Array,
      //   required: true
      // },
      theme: {
        type: String,
        required: false,
        default: 'dark'
      },
      collapsed: {
        type: Boolean,
        required: false,
        default: false
      },
      device: {
        type: String,
        required: false,
        default: 'desktop'
      }
    },
    data() {
      return {
        headerBarFixed: false,
        //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
        topMenuStyle: {
          headerIndexLeft: {},
          topNavHeader: {},
          headerIndexRight: {},
          topSmenuStyle: {}
        },
        // 追加 by li 顶部菜单新样式
        newTopMenuStyle: {
          userMenuMinWidth:{},
          headerLeftWidth: {},
          topMenuWidth:{}
        },
      }
    },
    watch: {
      /** 监听设备变化 */
      device() {
        if (this.mode === 'topmenu') {
          this.buildTopMenuStyle()
        }
        // 追加 by li 顶部菜单新样式
        this.buildNewTopMenuStyle();
      },
      /** 监听导航栏模式变化 */
      mode(newVal) {
        if (newVal === 'topmenu') {
          this.buildTopMenuStyle()
        }
        // 追加 by li 顶部菜单新样式
        this.buildNewTopMenuStyle();
      }
    },
    // 追加 by li 获取一级菜单 START
    computed: {
      ...mapState({
        permissionMenuList: (state) => {
          const routers = [];
          var bol=false;
          for (var item of state.user.permissionList) {
            if (item.path != '/dashboard/analysis') {
              const { children, ...new_item } = item;
              routers.push(new_item);
            }
          }
          return routers;
        },
        level2menus: state => state.user.level2menu
      })
    },
    // 追加 by li 获取一级菜单 END
    //update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
    mounted() {
      window.addEventListener('scroll', this.handleScroll)
      //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
      if (this.mode === 'topmenu') {
        this.buildTopMenuStyle()
      }
      //update-end--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
      // 追加 by li 顶部菜单新样式
      this.buildNewTopMenuStyle();
      // 追加 by li 初始化时判断布局 START
      for (var item of this.permissionMenuList) {
        if (item.name == 'ldkb') {
          this.up_menu('ldkb');
          return;
        }
      }
      this.up_menu(this.permissionMenuList[0].name);
      // 追加 by li 初始化时判断布局 END
    },
    methods: {
      // 追加 by li 一级菜单点击事件、菜单样式变换 START
      ...mapActions(["SetLevel2menu", "SetClearTab", "ToggleTheme", "ToggleLayoutMode"]),
      level1_select(obj) {
        this.up_menu(obj.key.substring(0,1)=="/" ? obj.key.substring(1):obj.key);
      },
      up_menu(type='') {
        console.log('-user-----'+type)
        if(type=='ldkb'){
          this.ToggleLayoutMode('topmenu');
          this.ToggleTheme('light');
        }
        else{
          this.ToggleLayoutMode('sidemenu');
          this.ToggleTheme('light');
        }

        // 更新二级菜单
        this.SetLevel2menu(type);
        this.SetClearTab(true);

        // 显示缺省首页
        let path = getchild(this.level2menus, type);
        this.$router.push(path);

        // 追加 by li 顶部菜单新样式
        this.buildNewTopMenuStyle();

      },
      // 追加 by li 一级菜单点击事件 END
      handleScroll() {
        if (this.autoHideHeader) {
          let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
          if (scrollTop > 100) {
            this.headerBarFixed = true
          } else {
            this.headerBarFixed = false
          }
        } else {
          this.headerBarFixed = false
        }
      },
      toggle() {
        this.$emit('toggle')
      },
      //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
      buildTopMenuStyle() {
        if (this.mode === 'topmenu') {
          if (this.device === 'mobile') {
            // 手机端需要清空样式，否则显示会错乱
            this.topMenuStyle.topNavHeader = {}
            this.topMenuStyle.topSmenuStyle = {}
            this.topMenuStyle.headerIndexRight = {}
            this.topMenuStyle.headerIndexLeft = {}
          } else {
            let rightWidth = '260px'
            this.topMenuStyle.topNavHeader = { 'min-width': '165px' }
            // 删除 by li 顶部菜单不需要
            // this.topMenuStyle.topSmenuStyle = { 'width': 'calc(100% - 165px)' }
            this.topMenuStyle.headerIndexRight = { 'min-width': rightWidth }
            // 删除 by li 顶部菜单不需要
            // this.topMenuStyle.headerIndexLeft = { 'width': `calc(100% - ${rightWidth})` }
          }
        }
      },
      // 追加 by li 顶部菜单新样式
      buildNewTopMenuStyle() {
        if (this.device === 'mobile') {
          this.newTopMenuStyle.minWidth = {'min-width': '100px'}
          this.newTopMenuStyle.headerLeftWidth = { 'width': 'calc(100% - 100px)' }
          this.newTopMenuStyle.topMenuWidth = {'width': 'calc(100% - 260px)'}
        } else {
          this.newTopMenuStyle.minWidth = {'min-width': '260px'}
          this.newTopMenuStyle.headerLeftWidth = { 'width': 'calc(100% - 260px)' }
          if (this.mode === 'sidemenu'){
            this.newTopMenuStyle.topMenuWidth = {'width': 'calc(100% - 410px)'}
          }else{
            this.newTopMenuStyle.topMenuWidth = {'width': 'calc(100% - 550px)'}
          }
        }
      }
      //update-begin--author:sunjianlei---date:20190508------for: 顶部导航栏过长时显示更多按钮-----
    }
  }
</script>

<style lang="scss" scoped>
  /* update_begin author:scott date:20190220 for: 缩小首页布局顶部的高度*/

  $height: 59px;

  .layout {

    .top-nav-header-index {
      /*追加 by li 更新顶部显示一级菜单样式 START*/
      z-index: 2;
      color: white;
      height: $height;
      background-color: #0cba9f;
      /*追加 by li 更新顶部显示一级菜单样式 END*/
      .header-index-wide {
        margin-left: 10px;

        .ant-menu.ant-menu-horizontal {
          height: $height;
          line-height: $height;
        }
      }
      .trigger {
        line-height: 64px;
        &:hover {
          background: rgba(0, 0, 0, 0.05);
        }
      }
    }

    .header {
      z-index: 2;
      color: white;
      height: $height;
      background-color: #0cba9f;
      transition: background 300ms;

      /* dark 样式 */
      &.dark {
        color: #000000;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
        background-color: white !important;
      }
    }

    .header, .top-nav-header-index {
      &.dark .trigger:hover {
        background: rgba(0, 0, 0, 0.05);
      }
    }
  }

  .ant-layout-header {
    height: $height;
    line-height: $height;
  }
  /*追加 by li 显示logo*/
  .logo {
    height: $height !important;
    line-height: $height !important;
    box-shadow: none !important;
    transition: background 300ms;
    overflow: hidden;
    position: relative;
    float:left;
    img {
      margin-left: 60px;
      height: 78%;
      -webkit-background-size: 400%;
      background-size: 400%;
    }

  }
  /* update_end author:scott date:20190220 for: 缩小首页布局顶部的高度*/

</style>
<style>
  .top-menu {
    color: rgb(255, 255, 255);
  }

  .header-index-wide {
    margin-left: 10px;
  }

  .header-index-wide {
    width: 100%;
    margin: auto;
    padding: 0 20px 0 0;
    display: -ms-flexbox;
    display: flex;
    height: 59px;
  }

  .header-index-wide .header-index-left {
    -ms-flex: 1 1;
    flex: 1 1;
    display: -ms-flexbox;
    display: flex;
  }

  .top-menu{
    text-align: right;
  }
  .top-menu ul {
    height: 60px;
    line-height: 59px;
    color: white;
    background: transparent;
  }

  .top-menu .ant-menu-horizontal > .ant-menu-item:hover,
  .top-menu .ant-menu-horizontal > .ant-menu-submenu:hover,
  .top-menu .ant-menu-horizontal > .ant-menu-item-active,
  .top-menu .ant-menu-horizontal > .ant-menu-submenu-active,
  .top-menu .ant-menu-horizontal > .ant-menu-item-open,
  .top-menu .ant-menu-horizontal > .ant-menu-submenu-open,
  .top-menu .ant-menu-horizontal > .ant-menu-item-selected,
  .top-menu .ant-menu-horizontal > .ant-menu-submenu-selected {
    color: white;
    /*background: rgb(23, 129, 255);*/
    background: #0cba9f;
  }

</style>